<template>
  <!--会员详情页面-->
  <div class="huiyuandetail">
    <p class="names"><img :src="src" alt="" width="30"><span>{{accountGoods.userName}}</span></p>

    <div
      v-if="accountGoods.vipCardState==1&&accountGoods.vipcardCategoryCode=='VIP'&& accountGoods.vipServerIsExpre==false">
      <p class="imgid"><img :src="accountGoods.detailsImg | imgPathFilter" alt="" width="100%"><span>NO.{{accountGoods.vipCardNo}}</span>
      </p>
    </div>
    <div class="err" v-else>
      <img :src="accountGoods.detailsImg | imgPathFilter" alt="" width="100%">
      <span>NO.{{accountGoods.vipCardNo}}</span>
      <div v-if="accountGoods.vipServerIsExpre">
        <p>贵宾厅服务已过期</p>
      </div>
      <div v-else>
        <p v-if="accountGoods.vipCardState==2 ">已过期</p>
        <p v-if="accountGoods.vipCardState==5">已冻结</p>
        <p v-if="accountGoods.vipCardState==6">退卡中</p>
        <p v-if="accountGoods.vipCardState==7">已退卡</p>
        <p v-if="accountGoods.vipCardState==8">已转卡</p>
        <p v-if="accountGoods.vipCardState==9">已转赠</p>
      </div>
    </div>

    <wv-panel class="two">
      <wv-media-box
        :thumb="thumb"
        title="24小时服务热线"
        :description="accountGoods.hoursHotline"
      />
    </wv-panel>

    <wv-panel class="two">
      <wv-media-box
        :thumb="thumb2"
        title="全国投诉专线"
        :description="accountGoods.servicePhone"
      />
      <wv-media-box
        :thumb="thumb3"
        title="点我使用贵宾厅" class="clickme"
        @click="goSaomaDetail(accountGoods.accountGoodsId)"
        v-if="accountGoods.vipCardState==1&& accountGoods.vipServerIsExpre==false&&accountGoods.haveVipServer"
      />
      <wv-media-box
        :thumb="thumb3"
        title="贵宾厅服务已过期" class="noclick" v-if="accountGoods.vipServerIsExpre==true"
      />
    </wv-panel>
    <p class="myquanyi">权益说明</p>
    <div>
      <ul class="quanyilist" v-for="(item,index) in accountGoods.cardServerList" v-if="index==0">
        <li>
          <img :src="item.serverImg | imgPathFilter" alt="" width="18">{{item.serverName}}
        </li>
        <li v-html="item.serverDesc"></li>
        <li v-html="'有效期 终身'" v-if="item.validDayType==1"></li>
        <li v-html="'有效期'+item.initDate+'--'+item.expireDate" v-else></li>
      </ul>
      <div v-if="isshow">
        <ul class="quanyilist" v-for="(item,index) in accountGoods.cardServerList" v-if="index>0">
          <li>
            <img :src="item.serverImg | imgPathFilter" alt="" width="18">{{item.serverName}}
          </li>
          <li v-html="item.serverDesc"></li>
          <li v-html="'有效期 终身'" v-if="item.validDayType==1"></li>
          <li v-html="'有效期'+item.initDate+'--'+item.expireDate" v-else></li>
        </ul>
      </div>
    </div>
    <p class="offer" @click="goBack()">返回</p>
  </div>
</template>

<script type="text/ecmascript-6">
  import {getVipcardServerDetail} from '../../../../test/unit/http'

  export default {
    name: 'tiyanquandetail',
    props: {},
    data() {
      return {
        src: require('../../../assets/huangguan.png'),
        img: require('../../../assets/jinkabanner.png'),
        thumb: require('../../../assets/hour.png'),
        thumb1: require('../../../assets/hot.png'),
        thumb2: require('../../../assets/tousu.png'),
        thumb3: require('../../../assets/smallerweima.png'),
        quanyiimg: require('../../../assets/fuwu.png'),
        yanwuxian: require('../../../assets/baoxian.png'),
        dianzi: require('../../../assets/dainzi.png'),
        jifen: require('../../../assets/jifen.png'),
        shouqi: require('../../../assets/shouqi.png'),
        zhankai: require('../../../assets/xiala.png'),
        isshow: false,
        isvisible: false,
        accountGoods: {},
        type: 1
      };
    },
    methods: {
      goSaomaDetail(accountGoodsId) {
        this.$router.push({path: 'saomadetail', query: {accountGoodsId: accountGoodsId}})
      },
      goBack() {
        this.$router.go(-1);
      },
      goEnter() {
        this.$router.push({path: 'index'});
      }
    },
    created() {
      let accountGoodsId = this.$route.query.accountGoodsId;
      getVipcardServerDetail({accountGoodsId: accountGoodsId}).then(res => {
        console.log(res);
        if (res.code == 100) {
          this.accountGoods = res.object;
          console.log(this.accountGoods)
        }
      })
    },
    components: {}
  }
</script>


<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less" rel="stylesheet/less">
  .err {
    position: relative;

    span {
      position: absolute;
      top: 20px;
      right: 28px;
      color: #7b4813;
    }

    p {
      background-color: rgba(0, 0, 0, 0.5);
      color: #fff;
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      font-weight: 900;
      letter-spacing: 5px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }


  .names {
    font-size: 18px;
    font-weight: 700;
    color: #111;
    text-align: left;
    padding: 10px;

    img {
      vertical-align: text-bottom;
      margin-right: 10px;
    }
  }

  .huiyuandetail {
    text-align: left;

    .weui-panel:before {
      border-top: none;

    }

    .myquanyi {
      font-size: 20px;
      font-weight: 700;
      color: #111;
      padding-left: 15px;
      margin-top: 30px;
    }

    .imgid {
      position: relative;

      span {
        position: absolute;
        top: 20px;
        right: 28px;
        color: #7b4813;
        font-weight: 700;
      }
    }

    .quanyilist {
      padding: 15px;
      color: #999;
      line-height: 25px;
      text-align: left;
      margin-bottom: 50px;
      li:first-child {
        color: #111;
        font-size: 16px;

        img {
          margin-right: 5px;
          vertical-align: text-bottom;
        }
      }

      li:nth-child(2) {
        margin: 5px 0;
      }
    }

    .shouqi {
      text-align: center;
      margin: 10px 0;
    }

    .last {
      padding-bottom: 120px;
    }

    .offer {
      position: fixed;
      bottom: 0;
      width: 100%;
      background-image: linear-gradient(to left, #4c92ed, #61beec);
      height: 50px;
      line-height: 50px;
      color: #fff;
      text-align: center;
      z-index: 999;
    }

    .beizhu {
      margin: 15px;
      padding: 10px 0;
      border-top: 1px solid #e5e5e5;
      color: #111;

      p {
        color: #666;
        margin-bottom: 10px;
      }
    }

    .text {
      font-size: 15px;
      color: #666;
      line-height: 25px;
      text-align: left;
      padding: 15px;
      margin-bottom: 30px;
    }

  }

</style>
